<template>
    <div id="all">
		<el-dialog title="百度地图坐标选择器" width="600px" top="40px" :visible.sync="show" :before-close="closeForm" append-to-body>
				<el-input id="suggestId" size="small" suffix-icon="el-icon-location" v-model="address" autoComplete="off" clearable  placeholder="请输入搜索地址"></el-input>
				<div id="allmap"></div>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" type="primary" @click="submit" >
						<span>确 定</span>
					</el-button>
					<el-button size="small" @click="closeForm">取 消</el-button>
				</div>
			</el-dialog>
		</div>
</template>

<script>
export default {
    props: {
		mapKey: {
			type: String,
			default: 'EZPCgQ6zGu6hZSmXlRrUMTpr'
		},
		show: {
			type: Boolean,
			default: false
		},
		address_detail:{
			type:String,
			default:null
		},
		picker:{
			type:String
		}
	},
	data() {
		let points =  this.address_detail ? JSON.parse(this.address_detail) : {lng:'',lat:'',address:''}
		return {
			lng:points.lng,
            lat:points.lat,
            address:points.address, 
		};
	},
	mounted(){
		this.loadScript()
	},
    methods: {
        loadScript() {
			var script = document.createElement("script");
			script.type = "text/javascript";
			window.initMap = () => {
				this.init()
			};
			script.src ="https://api.map.baidu.com/api?v=2.0&ak=" +this.mapKey +"&callback=initMap"
			document.body.appendChild(script);
		},
		init(){
			var a = {lng:this.lng,lat:this.lat,of: "inner"}
			var map = new BMap.Map("allmap");
			map.enableScrollWheelZoom(false)
			if(this.lng && this.lat){
				var point = new BMap.Point(this.lng,this.lat);
				map.centerAndZoom(point,16)
				var myIcon = new BMap.Icon("", new BMap.Size(50,70));
				map.addOverlay(new BMap.Marker(a,{icon:myIcon}))
			}else{
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					map.centerAndZoom(r.point, 16); //根据浏览器定位,设置城市和地图级别。
				})
			}
			var that = this;
			//地图点击事件。获取点击位置经纬度位置
			map.addEventListener('click', function(e) {
				that.lng = e.point.lng
				that.lat = e.point.lat
				map.clearOverlays();
				map.addOverlay(new BMap.Marker(e.point))
				var point = new BMap.Point(e.point.lng, e.point.lat);
				var gc = new BMap.Geocoder();
				gc.getLocation(point, function (rs) {
					var addComp = rs.addressComponents;
					that.address = addComp.province + addComp.city + addComp.district + addComp.street
				})
			})

			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});
			ac.setInputValue(that.address)
			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				that.address = myValue     
				map.clearOverlays(); //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					that.lng = pp.lng
					that.lat = pp.lat
					map.centerAndZoom(pp, 16);
					var myIcon = new BMap.Icon("", new BMap.Size(50,70));
					map.addOverlay(new BMap.Marker(pp,{icon:myIcon})); //添加标注
				}
				var local = new BMap.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			})
		},
		submit(){
			let address = {address:this.address,lng:this.lng,lat:this.lat}
			this.$emit('update:address_detail', JSON.stringify(address))
			this.closeForm()
		},
		closeForm(){
			this.$emit('update:show', false)
		}
    },   
}
</script>
<style scoped>
   #allmap{
        width: 100%;
        height: 400px;
        margin-top: 1px;
    }
</style>
